<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>我的</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <style>
        body {
            background-color: #e8e8e8;
        }

        .top {
            height: 208px;
            width: 100%;
        }

        .test {
            position: relative;
        }

        .img_n {
            width: 20px;
            position: absolute;
            top: 40px;
            left: 20px;
        }

        .img_s {
            width: 22px;
            position: absolute;
            top: 39px;
            right: 20px;
            z-index: 99;
        }

        .img_49 {
            width: 85%;
            height: 152px;
            position: absolute;
            top: 22px;
            right: 0px;
        }

        .code,
        .code_nosign {
            position: absolute;
            color: #fff;
            background-color: #898989;
            padding: 5px 5px 0px 5px;
            height: 27px;
            right: 3%;
            top: 85px;
            border-radius: 20px;
            font-size: 12px;
            text-align: center;
            z-index: 9999;
        }

        .code_nosign {
            background-color: #F49C23;
        }

        .title {
            height: 60px;
            background-color: #fff;
            margin-bottom: 6px;
        }

        .child {
            width: 49%;
            float: left;
            /*text-align: center;*/
            font-size: 15px;
            margin-left: 25%;
        }

        .line {
            height: 44px;
            margin-top: 8px;
            width: 2px;
            background-color: #dcdcdc;
            float: left;
        }

        .img_sj {
            width: 29px;
            display: inline-block;
            vertical-align: middle;
        }

        .img_sj1 {
            width: 23px;
            display: inline-block;
            vertical-align: middle;
        }

        .list {
            line-height: 40px;
            background-color: #fff;
            color: #727272;
            font-size: 16px;
        }

        .listmsg {
            display: -webkit-box;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .listmsg::-webkit-scrollbar {
            display: none;
        }

        .bottom {
            padding: 4px 20px;
            margin-bottom: 3px;
        }

        .img_m {
            width: 31px;
            padding-right: 15px;
            display: inline-block;
            vertical-align: middle;
            padding-bottom: 3px;
        }

        .img_jt {
            width: 7px;
            float: right;
            padding-top: 12px;
        }

        .img_jt1 {
            width: 16px;
            float: right;
            padding-top: 12px;
            margin-right: -4px;
        }

        .childlist {
            text-align: center;
            padding: 0px 6px;
            position: relative;
        }

        .image {
            width: 118px;
            height: 60px;
            border-radius: 8px;
        }

        .imgdiv {
            position: absolute;
            top: 60px;
            width: 100%;
        }

        .img_bm {
            width: 87px;
            height: 87px;
            border-radius: 50%;
            margin: 0 auto;
        }

        .name {
            font-size: 12px;
            padding-top: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
        }

        .head_bottom {
            position: absolute;
            top: 76%;
            width: 100%;
            text-align: center;
        }

        .tubiao {
            float: left;
            line-height: 60px;
            margin-left: 19%;
            margin-right: 9%;
        }

        .nologin {
            font-size: 17px;
            color: #727272;
            line-height: 65px;
        }

        .myxuefen {
            margin-top: 10px;
            text-align: center;
        }

        .alter {
            background-color: #EA5413;
            color: #fff;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            position: absolute;
            left: 15px;
            top: 30px;
            font-size: 12px;
            line-height: 18px;
            text-align: center;
        }

        .img_61 {
            height: 148px;
            width: 134px;
            position: absolute;
            z-index: 2;
            right: 50%;
            top: 50%;
            margin-top: 108px;
            margin-right: -69px;
        }

        .isvip {
            position: absolute;
            bottom: 32%;
            right: 35%;
            background-color: #F39800;
            color: #fff;
            font-size: 12px;
            border-radius: 5px;
            padding: 0px 12px;
        }
        .sharesuccess {
          background-color: #3F3A39;
          width: 140px;
          color: #fff;
          text-align: center;
          border-radius: 10px;
          padding: 10px;
          position: absolute;
          top: 256px;
          margin-top: -43px;
          left: 50%;
          margin-left: -70px;
           display: none;
          /*display: block;*/
        }
        .shareimg {
            width: 82px;
            height: 82px;
            margin: 0 auto 10px;
        }

        .sharetext {
            font-size: 16px;
        }

        .getscore {
            font-size: 14px;
        }
        .weidenglu{
          padding: 15px;
          text-align: center;
          background-color: #fff;
          margin-bottom: 7px;
          line-height: 30px;
        }
        .weidenglufont{
          margin-left:11px;
        }
    </style>
</head>

<body>
    <div id="vm" v-cloak>
        <div class="top test">
            <img v-bind:src="bgmine" alt="" style="width:100%;height:100%;">
            <img src="../../image/my/notice.png" onclick="OpenMessageWin()" alt="" class="img_n">
            <div class="alter" v-if="isreadflag">{{noreadnumber}}</div>
            <img src="../../image/my/set.png" onclick="OpenSetupWin()" alt="" class="img_s">
            <!-- <div class="code" v-if="!isloginflag" onclick="loginwin()">登录获取每日学分</div> -->
            <!-- <div class="code_nosign" v-else-if=!issignflag @click="signmethod()">签到+{{signscore}}学分</div> -->
            <!-- <div class="code" v-else-if=issignflag>本日已签到</div> -->
            <div class="imgdiv">
                <img v-bind:src=avatar onclick="OpenMySelfWin()" alt="" class="img_bm">
            </div>
            <!-- <span class="isvip" v-if="level==1">VIP</span> -->

            <div class="head_bottom">
                <div style="font-size:17px;color:#1c1c1c;text-align:center;letter-spacing:3.4px;">{{nickname}}</div>
                <!-- <div style="font-size:13px;color:#727272;text-align:center;" onclick="loginwin()" v-if="!isloginflag">点击登录</div> -->
            </div>
        </div>
        <!-- <div class="title"> -->
            <!-- <div class="child">
                <div class="tubiao" v-if="level==1">
                    <img src="../../image/my/ring.png" alt="" class="img_sj1">
                </div>
                <div class="tubiao" v-else>
                    <img src="../../image/my/shengji.png" alt="" class="img_sj1">
                </div>
                <span class="nologin" v-if="!isloginflag" onclick="loginwin()">未登录</span>
                <span class="nologin" v-else-if="level==0" onclick="unbuyvipwin()">升级VIP</span>
                <div class="myxuefen" v-else-if="level==1">
                    <div>VIP会员</div>
                    <div>{{validate(validity_period)}}</div>
                </div>
                <div class="aui-clearfix"></div>
            </div> -->
            <!-- <div class="line"></div> -->
            <!-- <div class="child" onclick="OpenXuefenWin()">
                <div class="tubiao">
                    <img src="../../image/my/study.png" alt="" class="img_sj">
                </div>

                <span class="nologin" v-if="!isloginflag">未登录</span>
                <div class="myxuefen" v-else>
                    <div>我的学分</div>
                    <div>{{score}}</div>
                </div>
                <div class="aui-clearfix"></div>

            </div> -->
            <!-- <div class="aui-clearfix"></div> -->
        <!-- </div> -->

        <!-- <div class="list bottom" onclick="OpenMyBuyWin()">
            <img src="../../image/my/money.png" alt="" class="img_m">我的购买
            <img src="../../image/my/jiantou.png" alt="" class="img_jt">
        </div> -->

        <!-- <div class="weidenglu"> -->
        <div v-if="!isloginflag" onclick="loginwin()" class="weidenglu">
          <img src="../../image/my/study.png" alt="" class="img_sj">
          <span class="weidenglufont">未登录</span>
        </div>
        <div class="list bottom" onclick="OpenMyCollectWin()">
            <img src="../../image/my/heart0.png" alt="" class="img_m">我的收藏
            <img src="../../image/my/jiantou.png" alt="" class="img_jt">
        </div>
        <div style="background-color:#fff;" class="bottom">
            <div class="list" onclick="OpenMyHistoryWin()">
                <img src="../../image/my/time.png" alt="" class="img_m">观看历史
                <img src="../../image/my/jiantou.png" alt="" class="img_jt">

                <!-- <img src="../../image/my/downjt.png" alt="" class="img_jt1"> -->
            </div>
            <div class="listmsg" v-if="ishistorylistflag">
                <div class="childlist" v-for="(item,key) in allhistorylist" @click="Openjieshao(item)">
                    <!-- <span class="videotype" :class="{videotypedaka:item.video_type==3,videotypemianfei:item.video_type==1}">{{videotype(item.video_type)}}</span> -->
                    <img v-bind:src="item.img" alt="" class="image">
                    <div class="name">{{item.video_name}}</div>
                </div>
            </div>
            <div class="aui-clearfix"></div>
        </div>
        <div class="sharesuccess">
            <img src="../../image/2.png" class="shareimg" alt="">
            <div class="sharetext">签到成功</div>
            <div class="getscore">获得学分<span style="color:#EA5413"> + {{signscore}}</span></div>
        </div>
        <div class="list bottom" onclick="OpenMyHelpWin()">
            <img src="../../image/my/help.png" alt="" class="img_m">帮助中心
            <img src="../../image/my/jiantou.png" alt="" class="img_jt">
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
    var uid, session, mobile;
    var histortlist = $api.getStorage('histortlist')
    var vm = new Vue({
        el: '#vm',
        data: {
            avatar: '../../image/my/bigmy.png',
            nickname: '',
            score: '0',
            isloginflag: false,
            // 标记是否是vip
            level: '0',
            // vip到期时间
            validity_period: '0',
            // 是否签到
            issignflag: false,
            // 是否有未读
            isreadflag: false,
            // 未读消息数
            noreadnumber: '',
            // 签到一次的学分数
            signscore: '',
            // 存放观看历史
            allhistorylist: [],
            ishistorylistflag: false,
            // bgmine:'../../image/bgmine1.jpg'
            bgmine: ''
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
                var ajpush = api.require('ajpush');
                ajpush.setListener(
                    function(ret) {
                        // console.log(JSON.stringify(ret))
                        // alert(JSON.stringify(ret))
                        // var systemType = api.systemType
                        // if (systemType == 'ios') {
                        //     apicmmon.openwin('verifyinformation', '../login/verify-information_win.html')
                        // } else {
                            _this.isread();
                        // }
                        // alert(JSON.stringify(ret))
                    }
                );

            }
        },
        methods: {
            init: function() {
                var _this = this;
                uid = $api.getStorage('uid');
                session = $api.getStorage('session');
                mobile = $api.getStorage('mobile');

                // var nothirdlogin=false;
                api.addEventListener({
                    name: 'exitlogin'
                }, function(ret, err) {
                    location.reload();
                });
                api.addEventListener({
                    name: 'loginsuccess'
                }, function(ret, err) {
                    _this.init();
                });



                api.addEventListener({
                    name: 'paysuccess'
                }, function(ret, err) {
                    _this.init();
                });

                api.addEventListener({
                    name: 'watchvideo'
                }, function(ret, err) {
                    histortlist = $api.getStorage('histortlist')
                    _this.getVideoUserHistory();
                });

                api.addEventListener({
                    name: 'delevideohistory'
                }, function(ret, err) {
                    histortlist = api.pageParam.histortlist;
                    _this.getVideoUserHistory();
                });

                api.addEventListener({
                    name: 'thirdbindsuccess'
                }, function(ret, err) {
                    _this.init();
                });

                api.addEventListener({
                    name: 'sharevideosuccess'
                }, function(ret, err) {
                    _this.init();
                });
                api.addEventListener({
                    name: 'shareappsuccess'
                }, function(ret, err) {
                    _this.init();
                });

                if (uid) {
                    _this.isloginflag = true;
                    api.addEventListener({
                        name: 'yiduflag'
                    }, function(ret, err) {
                        _this.isread()
                    });
                    api.addEventListener({
                        name: 'signsuccess'
                    }, function(ret, err) {
                        // location.reload()
                        _this.issign();
                        _this.getuserinfo();
                    });
                } else {
                    _this.isloginflag = false;
                }
                api.addEventListener({
                    name: 'uploadPic'
                }, function(ret, err) {
                    _this.avatar = ret.value.uploadPic
                });
                api.addEventListener({
                    name: 'modifynicknamesuccess'
                }, function(ret, err) {
                    _this.nickname = ret.value.nickname
                });
                api.addEventListener({
                    name: 'refreshmine'
                }, function(ret, err) {
                    if (uid) {
                        _this.getuserinfo();
                    }
                    _this.aboutus();
                    _this.getVideoUserHistory();


                });


                if (uid) {
                    // 获取个人信息
                    _this.getuserinfo();
                    // 已读未读
                    _this.isread();
                    // 今天是否签到
                    _this.issign();
                    // 获取学分规则
                    _this.getXueRule();


                } else {
                    _this.nickname = _this.getRandom(10);
                }
                // 背景图
                _this.aboutus();
                // 观看历史
                _this.getVideoUserHistory();
            },
            videotype: function(res) {
                if (res == 2) {
                    return 'VIP'
                } else if (res == 3) {
                    return '大咖'
                } else {
                    return '免费'
                }
            },
            aboutus() {
                var _this = this;
                new rest().get('getAboutus').datae().success(function(res) {
                    // console.log(JSON.stringify(res))
                    console.log(res.msg.backgroud)
                    if (res.flag == 1) {
                        _this.bgmine = res.msg.backgroud;
                    }
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()
            },
            Openjieshao: function(item) {
                console.log(JSON.stringify(item))

                var _this = this;
                if (uid) {
                    var data1 = {
                        video_id: item.id,
                        uid: uid
                    }
                } else {
                    var data1 = {
                        video_id: item.id,
                        uid: ''
                    }
                }
                new rest().get('getDetail').datae(data1).success(function(res) {
                    console.log(JSON.stringify(res))
                    if (res.flag == 1) {
                        _this.videodetial = res.msg;
                        apicmmon.openwin('videodetail_win', '../VIP/videodeail.html', {
                            videoid: item.id
                        })
                    } else {
                        api.toast({
                            msg: '视频不存在',
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()


            },
            getRandom(num) {
                var random = Math.floor((Math.random() + Math.floor(Math.random() * 9 + 1)) * Math.pow(10, num - 1));
                var a = '游客' + random
                $api.setStorage('youkenickname', a);
                return '游客' + random

            },
            getVideoUserHistory: function() {
                var _this = this;
                if (uid) {
                    new rest().get('getVideoUserHistory').datae({
                        uid: uid,
                        page: '1',
                        psize: 10
                    }).success(function(res) {
                        if (res.flag == 1) {
                            if (res.msg.length == 0) {
                                _this.ishistorylistflag = false;
                            } else {
                                _this.ishistorylistflag = true;
                                _this.allhistorylist = res.msg;
                            }
                        }
                        console.log(JSON.stringify(res))
                    }).error(function(err) {
                        console.log(JSON.stringify(err))
                    }).run()
                } else {
                    var zzz;
                    if (histortlist) {
                        if (histortlist.length == 0) {
                            _this.ishistorylistflag = false;
                            _this.allhistorylist = []
                        } else {
                            _this.ishistorylistflag = true;
                            _this.allhistorylist = histortlist.slice(0, 10);
                            zzz = _this.allhistorylist
                        }
                    } else {
                        _this.ishistorylistflag = false;
                        _this.allhistorylist = []
                    }

                    if (_this.allhistorylist) {
                      if(zzz){
                        for (var i = 0; i < zzz.length; i++) {
                            _this.allhistorylist = []
                            data2 = {
                                video_id: zzz[i].id,
                                uid: ''
                            }
                            new rest().get('getDetail').datae(data2).success(function(res) {
                                console.log(JSON.stringify(res))
                                if (res.flag == 1) {
                                    _this.ishistorylistflag = true;
                                    _this.allhistorylist.push(res.msg)
                                }
                            }).error(function(err) {
                                console.log(JSON.stringify(err))
                            }).run()
                        }
                      }

                        // for (var i = 0; i < histortlist.length; i++) {
                        //   data2 = {
                        //       video_id: histortlist[i].id,
                        //       uid: ''
                        //   }
                        //   new rest().get('getDetail').datae(data2).success(function(res) {
                        //       console.log(JSON.stringify(res))
                        //       if (res.flag == 1) {
                        //         _this.ishistorylistflag = true;
                        //         _this.allhistorylist.push(res.msg)
                        //       }
                        //   }).error(function(err) {
                        //       console.log(JSON.stringify(err))
                        //   }).run()
                        // }
                    }

                }

            },

            getuserinfo() {
                var _this = this;
                var third_nickname=$api.getStorage('third_nickname')
                new rest().get('getUserInfo').datae({
                    uid: uid
                }).success(function(res) {
                    if (res.flag == 1) {
                      // alert($api.getStorage('third_nickname'))

                        if (res.msg[0].img) {
                            // if($api.getStorage('avatar')){
                            //   _this.avatar=$api.getStorage('avatar');
                            // }else{

                            _this.avatar = res.msg[0].img;
                            // }
                        } else {
                            _this.avatar = '../../image/my/bigmy.png';
                        }

                        // if($api.getStorage('uname')){
                        //   _this.nickname=$api.getStorage('uname');
                        // }else{
                        if(res.msg[0].nickname){
                          _this.nickname = res.msg[0].nickname;
                        }else{
                          if(_this.third_nickname){
                              _this.nickname = _this.third_nickname;
                          }
                        }

                        // }
                        // 学分
                        _this.score = res.msg[0].score;
                        // 是否是vip
                        _this.level = res.msg[0].level;
                        // 是否签到
                        _this.status = res.msg[0].status;
                        // alert(_this.validity_period)

                        if (res.msg[0].validity_period) {
                            _this.validity_period = res.msg[0].validity_period;
                        }
                    } else {
                        if (res.msg[0] == '用户id已失效' || res.msg[0] == '用户id不存在') {
                            api.toast({
                                msg: '账号异常',
                                duration: 2000,
                                location: 'middle'
                            });
                            $api.rmStorage('uid');
                            $api.rmStorage('session');
                            $api.rmStorage('mobile');
                            api.sendEvent({
                                name: 'exitlogin'
                            });
                        }
                    }
                    // console.log(JSON.stringify(res))
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()
            },
            validate(riqi) {
                return riqi.split(' ')[0];
            },
            isread() {
                var _this = this;
                new rest().get('isUnRead').datae({
                    uid: uid
                }).success(function(res) {
                    if (res.flag == 1) {
                        if (res.msg == '0') {
                            _this.isreadflag = false;
                        } else {
                            _this.isreadflag = true;
                            if (res.msg >= 99) {
                                _this.noreadnumber = '99+'
                            } else {
                                _this.noreadnumber = res.msg;
                            }
                        }
                    } else {
                        // alert(res.msg)
                            // api.toast({
                            //     msg: res.msg,
                            //     duration: 2000,
                            //     location: 'middle'
                            // });
                    }
                    // console.log(JSON.stringify(res))
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()
            },
            issign() {
                var _this = this;
                new rest().get('isSign').datae({
                    uid: uid,
                    type: '1'
                }).success(function(res) {
                    if (res.flag == 1) {
                        if (res.msg == '已签到') {
                            _this.issignflag = true;
                        } else {
                            _this.issignflag = false;
                        }
                    } else {
                        // alert('res.msg')

                        api.toast({
                            msg: res.msg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                    console.log(JSON.stringify(res))
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()
            },
            signmethod:function () {
                // 签到
                var _this = this;
                new rest().get('share').datae({
                    _uid: uid,
                    session: session,
                    type: 1
                }).success(function(res) {
                    if (res.flag == 1) {
                      $('.sharesuccess').css('display', 'block');
                      setTimeout(function() {
                          $('.sharesuccess').css('display', 'none');
                      }, 1000);
                        // api.toast({
                        //     msg: '签到成功',
                        //     duration: 2000,
                        //     location: 'middle'
                        // });
                        _this.getuserinfo();
                        _this.issignflag = true;
                    } else {
                        api.toast({
                            msg: res.msg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                    console.log(JSON.stringify(res))
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()

            },
            getXueRule() {
                var _this = this;
                new rest().get('getRule').datae().success(function(res) {
                    if (res.flag == 1) {
                        _this.signscore = res.msg.sign_score;
                    } else {
                        // alert('getxurule')
                        api.toast({
                            msg: res.msg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                    console.log(JSON.stringify(res))
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()
            }
        }
    })



    function loginwin() {

        api.openFrame({
            name: 'login_introduction',
            url: './login_introduction.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            bounces: false,
            bgColor: 'rgba(0,0,0,0.7)',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
    }
    // 设置
    function OpenSetupWin() {
        api.openWin({
            name: 'verifyset',
            url: '../login/verify-set_win.html',
        });
    }
    // 消息
    function OpenMessageWin() {
        api.openWin({
            name: 'verifyinformation',
            url: '../login/verify-information_win.html',
        });
    }
    // 我的购买
    function OpenMyBuyWin() {
        // if(uid){
        api.openWin({
            name: 'mybuy_win',
            url: '../mybuy_win.html',
        });
        // }else{
        // loginwin()
        // }

    }
    // 我的收藏
    function OpenMyCollectWin() {
        api.openWin({
            name: 'mycollect',
            url: '../mycollect_win.html',
        });

    }
    // 打开个人资料页面
    function OpenMySelfWin() {
        if (uid) {
            api.openWin({
                name: 'verify-personal',
                url: '../login/verify-personal.html',
            });
        } else {
            loginwin()
        }
    }

    // 购买vip
    function unbuyvipwin() {
        if (uid) {
            api.openWin({
                name: 'unbuy_vip_win',
                url: '../VIP/unbuy_vip_win.html',
            });
        } else {
            loginwin()
        }
    }
    // 观看历史
    function OpenMyHistoryWin() {
        api.openWin({
            name: 'watch_history_win',
            url: '../watch_history_win.html',
        });
    }
    // 帮助中心
    function OpenMyHelpWin() {
        api.openWin({
            name: 'verifyquestion',
            url: '../login/verify-question_win.html',
        });
    }
    // 我的学分
    function OpenXuefenWin() {
        if (uid) {
            api.openWin({
                name: 'verifymyself_win',
                url: '../login/verifymyself-win.html',
            });
        } else {
            loginwin()
        }

    }
    // $('body').click(function() {

    //
    // }
</script>

</html>
